<template>
  <div class="app">
    <div class="appname">
      <div class="titleName">
        <div class="left" @click="$router.go(-1)">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="el-icon-arrow-left"></i>
          <span style="font-size: 16px">搜索结果</span>
          <span style="font-size: 16px">/{{ getdetail.content }}</span>
        </div>
        <div class="right">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            :stretch="true"
            tab-position="bottom"
          >
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="FAQ" name="second"></el-tab-pane>
            <el-tab-pane label="文档" name="third"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="bodys">
        <div class="bodysLeft">
          <h3 style="text-align: center">{{ getdetail.content }}</h3>
          <div class="textName">
            <span style="text-align: right; width: 56%">{{
              getdetail.time
            }}</span
            ><span class="text">预览&nbsp;100</span
            ><span class="text">评论&nbsp;0</span
            ><span class="text">搜藏&nbsp;0</span>
          </div>
          <el-divider></el-divider>
          <div style="text-indent: 2em; line-height: 30px">
            {{ getdetail.name }}
          </div>
          <el-divider></el-divider>
          <div class="number">
            <div style="margin-left: 20px">
              <el-button
                ><img
                  src="../assets/haoping.png"
                  alt=""
                  srcset=""
                />点赞</el-button
              >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button
                ><img
                  src="../assets/chaping.png"
                  alt=""
                  srcset=""
                />点踩</el-button
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button>
                <i class="iconfont blur">&#xe86a;</i>搜藏</el-button
              >
            </div>
          </div>
          <br />
          <br />
          <h3 class="pllb">评论列表</h3>
          <br />
          <div class="userNmame" v-for="(item, index) in user" :key="index">
            <img src="../assets/col.png" alt="" class="img" />
            <div class="userText">
              <div>
                <span style="font-size: 16px">{{ item.name }}</span
                >&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 12px">{{
                  item.time
                }}</span>
              </div>
              <br />
              <p style="">{{ item.content }}</p>
            </div>
            <br />
          </div>
          <br />
          <h3 class="pllb">发表评论</h3>
          <br />
          <div v-if="getLogin">
            <el-input
              class="inputText"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 20 }"
              placeholder="请输入内容"
              v-model="textarea2"
            >
            </el-input>
            <el-button
              slot="suffix"
              style="button"
              type="primary"
              @click="addEmal"
              >发表</el-button
            >
          </div>
          <div v-else>
            <div class="overLoing">
              <h4>
                请<a @click="ok" style="color: rgb(0, 26, 255)">登录</a>后再评价
              </h4>
            </div>
          </div>
          <br />
        </div>
        <div class="bodysRight">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="icontitle">
                <img class="icon" src="../assets/hot.png" alt="" />
                <span>热点知识</span>
              </div>
            </div>
            <div class="hotspot_list">
              <div
                class="item"
                :key="index"
                v-for="(item, index) in collection_list"
              >
                <br v-if="index > 0" />
                <span class="title_name">{{ item.title }}</span>
                {{ item.content }}
              </div>
            </div>
          </el-card>
          <br />
          <el-card class="box-card" v-if="getLogin">
            <div slot="header" class="clearfix">
              <div class="icontitle">
                <img
                  class="icon"
                  src="https://img02.mockplus.cn/image/2022-11-06/773a0cf0-5daa-11ed-a972-c91595df0c22.png"
                  alt=""
                />
                <span>最近阅览</span>
              </div>
            </div>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in collection_list"
                :key="index"
                :timestamp="activity.time"
                placement="top"
              >
                <span class="title_name" v-if="index < 8">{{
                  activity.title
                }}</span>
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
          <br />
          <el-card class="box-card" v-if="getLogin">
            <div slot="header" class="clearfix">
              <div class="icontitle">
                <img
                  class="icon"
                  src="https://img02.mockplus.cn/image/2022-11-06/5b3827e0-5da4-11ed-b8f2-7327e0cd9107.png"
                  alt=""
                />
                <span>我的收藏</span>
              </div>
            </div>
            <div class="hotspot_list">
              <div
                class="item"
                :key="index"
                v-for="(item, index) in collection_list"
              >
                <br v-if="index > 0" />
                <span class="title_name">{{ item.title }}</span>
                {{ item.content }}
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      collection_list: [],
      user: [],
      textarea2: "",
    };
  },
  computed: {
    ...mapGetters(["getdetail", "getLogin"]),
    value: {
      get() {
        return this.getdetail;
      },
    },
  },
  created() {
    this.getCollectionList();
    this.getuserList();
  },
  methods: {
    ...mapMutations(["setValue", "setLogin"]),
    addEmal() {
      if (this.textarea2) {
        this.user.push({
          name: " 王东东",
          content: this.textarea2,
          time: "2022-11-11",
        });
      }
    },
    handleClick() {},
    async getCollectionList() {
      const res = await request.get("/collection/list");
      this.collection_list = res.data;
    },
    async getuserList() {
      const res = await request.get("/collection/user");
      this.user = res.data;
    },
    ok() {
      this.$confirm("请先登录再做操作！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.setLogin({
            user: "王东东",
          });
          this.$message({
            type: "success",
            message: "登录成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消登录",
          });
        });
    },
  },
};
</script>
<style scoped>
.overLoing {
  background-color: rgb(204, 204, 204);
  width: 100%;
  height: 80px;
  border-radius: 20px;
  text-align: center;
  line-height: 90px;
}
.app {
  overflow-x: auto;
  height: 100%;
  background-color: #e9e9e9;
}
.appname {
  margin-bottom: 180px;
}
.userNmame {
  width: 100%;
  display: flex;
}
.userText {
  margin-left: 10px;
}
.img {
  border: 1px solid #e9e9e9;
  border-radius: 100px;
  margin-left: 50px;
}
.inputText {
  width: 80%;
  margin-left: 50px;
}

.pllb {
  margin-left: 50px;
}
.number {
  text-align: center;
}
.text {
  width: 10%;
  text-align: right;
}
.textName {
  width: 100%;
  margin-top: 10px;
  display: flex;
}
.name {
  text-align: left;
  width: 900px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.title_name {
  color: #999;
}
.icontitle {
  display: flex;
  align-items: center;
  vertical-align: middle;
}
.icon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.app {
  width: 100%;
  height: 100%;
}
.titleName {
  width: 100%;
  height: 50px;
  background-color: #e9e9e9;
  display: flex;
}
.left {
  font-size: 20px;
  line-height: 50px;
  width: 30%;
  text-align: left;
}
.right {
  width: 40%;
  line-height: 50px;
}
.bodys {
  width: 100%;
  height: 90%;
  background-color: #f8f8f8;
  display: flex;
  overflow-x: hidden;
}
.bodysLeft {
  flex: 7;

  padding: 10px;
}
.bodysRight {
  flex: 3;
  padding: 10px;
}
</style>
